<template>
    <view class="home_content">
        <view class="navigation">
            <view class="navigation_item">
                <view data-type="1" @click="selected" class="select-tab">全部</view>
                <view :class="select == 1 ? 'select-tab-bootom' : ''"></view>
            </view>
            <view class="navigation_item">
                <view data-type="2" @click="selected" class="select-tab">最热</view>
                <view :class="select == 2 ? 'select-tab-bootom' : ''"></view>
            </view>
            <view class="navigation_item">
                <view data-type="3" @click="selected" class="select-tab">收藏</view>
                <view :class="select == 3 ? 'select-tab-bootom' : ''"></view>
            </view>
            <view class="search">
                <uni-search-bar radius="35" @confirm="search" @input="input"></uni-search-bar>
            </view>
        </view>
        <!-- 内容 -->
        <view class='body-content'>
            <!-- 话题 -->
            <view class="topic-content" bindtap='openTopic'>
                <view class="topic-title">
                    <view class="title">
                        <view>今日话题</view>
                    </view>
                </view>
                <image class="topic-image" mode="aspectFill" src="https://image.qiuhuiyi.cn/FoYg-PE88UkQnPIVNBQknp2zOiD6">
                </image>
                <view class="topic-data">
                    <view class="topic-data-content">{{ '喜欢的那个她' }}</view>
                </view>
                <view class="topic-bottom">
                    <view class="topic-bottom-content">
                        <view class="topic-bottom-left">
                            <image src="/static/image/v2/index-browse.png"></image>
                            <view>{{ 10 }}次</view>
                        </view>
                        <view class="topic-bottom-middle">
                            <image src="/static/image/v2/index-topic-zan.png"></image>
                            <view>{{ 5 }}</view>
                        </view>
                        <view class="topic-bottom-right">
                            <image src="/static/image/v2/index-topic-comment.png"></image>
                            <view>{{ 20 }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 表白墙flag -->
            <view class="body-flag">
                <view class="flag">表白墙</view>
                <view class="flag-tab"></view>
            </view>
            <!-- 表白墙列表 -->
            <view class="body-list" bindtouchmove="hiddenComment">
                <view class="body-item">
                    <view class="item-header">
                        <view class="avatar-item" bindtap="openUserInfo">
                            <image class="avatar-border" src="/static/image/v2/border.png"></image>
                            <image class="user-avatar"
                                src="https://image.qiuhuiyi.cn/tmp/lDNJq4jcXlNM5f7a75fa69e3b8ee44a4222fb46cac98.jpeg">
                            </image>
                        </view>
                        <view class="nickname-item" bindtap="openUserInfo">
                            <view class="nickname-top">
                                <view class="poster-nickname">{{ '心里有个她' }}</view>
                                <image src="/static/image/v2/index-admin.png"></image>
                            </view>
                            <view class="nickname-bottom">
                                <view class="nickname-flag">表白@</view>
                                <view class="bottom-name">{{ '我家有个宝儿' }}</view>
                            </view>
                        </view>
                        <view class="icon-item">
                            <image src="/static/image/v2/index-delete.png" wx:if="{{true}}" bindtap='deletePost'></image>
                            <image src="/static/image/v2/index-collect.png" wx:if="{{true}}" bindtap="cancelFolllow">
                            </image>
                            <image src="/static/image/v2/index-not-collect.png" wx:if="{{false}}" bindtap="follow"></image>
                        </view>
                    </view>
                    <view class="item-content">
                        <view class="item-content-word" wx:if="{{true}}">{{ '眼里有星辰大海' }}</view>
                        <view class="item-content-image" wx:if='{{true}}'>
                            <image mode="aspectFill"
                                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F08152ab9-e102-409d-ab1d-b7b612100bf5%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684375301&t=89511b13e1fd4ced37ff2a861f86ea09"
                                bindtap='previewMoreImage'></image>
                        </view>
                    </view>
                    <view class="item-footer">
                        <view class="date">{{ '2023-01-15 10:23:56' }}</view>
                        <view class="letter-icon">
                            <image bindtap='showCommentInput' src="/static/image/v2/index-topic-comment.png"></image>
                            <view>{{ 1 }}</view>
                        </view>
                        <view class="letter-icon">
                            <image bindtap='praise' src="/static/image/v2/index-topic-zan.png"></image>
                            <view>{{ 1 }}</view>
                        </view>
                    </view>
                    <!-- 评论 -->
                    <view class="comment-content">
                        <view class="praise-content" wx:if="{{true}}">
                            <view class="praise-left">
                                <image src="/static/image/v2/index-like.png"></image>
                            </view>
                            <view class="praise-right">
                                <view class="praise-item" bindtap="openUserInfo">
                                    <image
                                        src="https://image.qiuhuiyi.cn/tmp/lDNJq4jcXlNM5f7a75fa69e3b8ee44a4222fb46cac98.jpeg">
                                    </image>
                                    <view class="praise-name">{{ '心里有个他' }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="comment-list" wx:if="{{true}}">
                            <view class="comment-left">
                                <image src="/static/image/v2/fill-comment.png"></image>
                            </view>
                            <view class="comment-right">
                                <view class="comment-item" wx:if="{{true}}"
                                    bindtap="{{sub.can_delete?'deleteComment':'commentOtherComment'}}">
                                    <image
                                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2Fcddcfd00-4b5b-4baf-a8f6-2859a7c6b6a2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684376139&t=96376a8d280c701f30a317601cd030eb">
                                    </image>
                                    <view class="comment-name" wx:if="{{true}}">
                                        {{ '小千代' }}</view>
                                    <!-- <view class="comment-name" wx:if="{{sub.author == 1 && sub.commenter.supertube != 1}}">
                                        {{ sub.commenter.nickname }}(楼主)</view>
                                    <view class="comment-name" wx:if="{{sub.commenter.supertube == 1}}">
                                        {{ sub.commenter.nickname }}(超管)</view> -->
                                    <view class="comment-word">：{{ '原来你喜欢我啊' }}</view>
                                </view>

                                <!-- <view class="comment-item" wx:if="{{sub.ref_comment}}" wx:for="{{item.comments}}"
                                    wx:key="id" wx:for-item="sub"
                                    bindtap="{{sub.can_delete?'deleteComment':'commentOtherComment'}}"
                                    data-objid="{{item.id}}" data-refid="{{sub.id}}" data-objtype='1'>
                                    <image src="{{sub.commenter.avatar}}"></image>
                                    <view class="comment-name">{{ sub.commenter.nickname }}</view>
                                    <view class="comment-word">回复：</view>
                                    <image src="{{sub.ref_comment.refCommenter.avatar}}"></image>
                                    <view class="comment-name">{{ sub.ref_comment.refCommenter.nickname }}：</view>
                                    <view class="comment-word">{{ sub.content }}</view>
                                </view> -->

                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script setup>
import { ref } from 'vue';
import Request from '../../utils/request'
import { onShow } from '@dcloudio/uni-app'
const requestService = new Request()
const select = ref(1)
const selected = (e) => {
    select.value = e.currentTarget.dataset.type
}
const search = () => {
    console.log('搜索');
}
const getData = async() => {
    let res = await requestService.get({
        url: '/new/0/inbox?app_code=KjjTODuLo6czLsLG',
        data:{}
    })
    console.log(res);
}

// 页面显示时
onShow(() => {
    getData()
})

</script>
  
<style lang="less" scoped>
page {
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;

    .home_content {
        display: flex;
        flex-direction: column;
        width: 100%;

        .navigation {
            width: 100%;
            height: 100rpx;
            background-color: #fff;
            box-shadow: 0 0 10rpx 0 rgba(203, 203, 203, 0.50);
            display: flex;
            flex-direction: row;
            align-items: center;
            position: fixed;
            z-index: 500;

            .navigation_item {
                display: flex;
                width: 15%;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                .select-tab {
                    color: #303030;
                    font-weight: 500;
                    color: #303030;
                    position: absolute;
                }

                .select-tab-bootom {
                    width: 60rpx;
                    height: 10rpx;
                    border-radius: 10rpx;
                    box-shadow: 0px 0px 8rpx 0px #fbc346;
                    background: #fbc346;
                    z-index: 100;
                    position: relative;
                    top: 35rpx;
                }
            }

            .search {
                width: 55%;
            }
        }

        .body-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 160rpx;

            .topic-content {
                width: 92%;
                display: flex;
                flex-direction: column;
                height: 500rpx;
                background: #ffffff;
                border-radius: 20rpx;
                box-shadow: 0px 0px 20rpx 0px rgba(193, 193, 193, 0.71);
                position: relative;

                .topic-title {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    position: absolute;

                    .title {
                        display: flex;
                        flex-direction: column;
                        width: 250rpx;
                        height: 70rpx;
                        background: linear-gradient(159deg, #ffd73b 11%, #fbc346 94%);
                        border-radius: 10rpx;
                        box-shadow: 0px 0px 12rpx 0px rgba(196, 174, 134, 0.50);
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        z-index: 100;
                        top: -35rpx;
                        margin: 0rpx auto;
                    }

                }

                .topic-image {
                    width: 100%;
                    height: 350rpx;
                    border-top-right-radius: 20rpx;
                    border-top-left-radius: 20rpx;
                }

                .topic-data {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 150rpx;
                    align-items: center;
                    justify-content: center;

                    .topic-data-content {
                        width: 92%;
                        height: 80rpx;
                        font-size: 28rpx;
                        font-family: PingFangSC, PingFangSC-Regular;
                        font-weight: 400;
                        text-align: left;
                        color: #303030;
                        line-height: 40rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }

                }

                .topic-bottom {
                    width: 100%;
                    height: 70rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .topic-bottom-content {
                        width: 92%;
                        height: 50rpx;
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        .topic-bottom-left {
                            width: 64%;
                            height: 100%;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            font-size: 22rpx;
                            font-family: PingFangSC, PingFangSC-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #303030;
                            line-height: 32rpx;

                            image {
                                width: 40rpx;
                                height: 40rpx;
                            }

                        }

                        .topic-bottom-middle {
                            width: 18%;
                            height: 100%;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 22rpx;
                            font-family: PingFangSC, PingFangSC-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #303030;
                            line-height: 32rpx;

                            image {
                                width: 50rpx;
                                height: 50rpx;
                            }
                        }

                        .topic-bottom-right {
                            width: 18%;
                            height: 100%;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 22rpx;
                            font-family: PingFangSC, PingFangSC-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #303030;
                            line-height: 32rpx;

                            image {
                                width: 50rpx;
                                height: 50rpx;
                            }
                        }
                    }
                }
            }

            /** 表白墙 **/
            .body-flag {
                width: 100%;
                display: flex;
                flex-direction: column;
                height: 140rpx;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                color: #303030;
                line-height: 25px;
                margin-bottom: 20rpx;

                .flag-tab {
                    width: 55px;
                    height: 5px;
                    background: #fbc346;
                    box-shadow: 0px 0px 8rpx 0px rgba(247, 171, 30, 0.81);
                    margin-top: 10rpx;
                }
            }

            .body-list {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-bottom: 70rpx;

                .body-item {
                    width: 92%;
                    background: #ffffff;
                    border-radius: 20rpx;
                    box-shadow: 0px 0px 20rpx 0px rgba(193, 193, 193, 0.71);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 70rpx;

                    .item-header {
                        height: 130rpx;
                        width: 92%;
                        display: flex;
                        flex-direction: row;

                        .avatar-item {
                            width: 23%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            position: relative;

                            .user-avatar {
                                width: 120rpx;
                                height: 120rpx;
                                border: 4rpx solid #303030;
                                border-radius: 30rpx;
                                z-index: 100;
                                position: relative;
                                top: -30rpx;
                            }

                            .avatar-border {
                                width: 90rpx;
                                height: 90rpx;
                                position: absolute;
                                z-index: 200;
                                left: -22rpx;
                                top: -50rpx;
                            }

                        }

                        .nickname-item {
                            width: 61%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            .nickname-top {
                                width: 100%;
                                height: 30%;
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                font-size: 30rpx;
                                font-family: PingFangSC, PingFangSC-Medium;
                                font-weight: 700;
                                text-align: left;
                                color: #303030;
                                line-height: 40rpx;

                                .poster-nickname {}

                                image {
                                    width: 90rpx;
                                    height: 27rpx;
                                    margin-left: 10px;
                                }

                            }

                            .nickname-bottom {
                                width: 100%;
                                height: 30%;
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                font-size: 30rpx;

                                .nickname-flag {
                                    width: 90rpx;
                                    height: 36rpx;
                                    background: linear-gradient(159deg, #ffd73b 11%, #fbc346 94%);
                                    border-radius: 18rpx;
                                    box-shadow: 0px 0px 16rpx 0px rgba(247, 171, 30, 0.50);
                                    font-size: 20rpx;
                                    margin-right: 15rpx;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                }

                                .bottom-name {
                                    height: 50rpx;
                                    flex-direction: column;
                                    align-items: flex-start;
                                    top: -5rpx;
                                }
                            }

                        }

                        .icon-item {
                            width: 16%;
                            height: 70%;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;

                            image {
                                width: 42rpx;
                                height: 42rpx;
                            }
                        }

                    }

                    .item-content {
                        width: 92%;
                        margin-bottom: 10rpx;
                        background: #ffffff;
                        border-radius: 20rpx;

                        .item-content-image {
                            width: 100%;
                            margin-top: 15rpx;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            justify-content: flex-start;

                            image {
                                width: 200rpx;
                                height: 200rpx;
                                border-radius: 20rpx;
                                margin-left: 10rpx;
                                margin-bottom: 10rpx;
                            }
                        }
                    }

                    .item-footer {
                        width: 92%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        margin-bottom: 15rpx;

                        .date {
                            width: 70%;
                            font-size: 20rpx;
                            font-family: PingFangSC, PingFangSC-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #303030;
                        }

                        .letter-icon {
                            width: 15%;
                            display: flex;
                            flex-direction: row;
                            font-size: 25rpx;
                            font-family: PingFangSC, PingFangSC-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #303030;
                            justify-content: flex-end;
                            align-items: center;

                            image {
                                width: 50rpx;
                                height: 50rpx;
                            }
                        }
                    }

                    .comment-content {
                        width: 92%;
                        margin-bottom: 30rpx;

                        .praise-content {
                            width: 100%;
                            display: flex;
                            flex-direction: row;

                            .praise-left {
                                width: 10%;

                                image {
                                    width: 40rpx;
                                    height: 40rpx;
                                    padding: 20rpx 0rpx;
                                }
                            }

                            .praise-right {
                                width: 90%;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                background: #f4f4f4;
                                padding: 20rpx 20rpx;

                                .praise-item {
                                    display: flex;
                                    flex-direction: row;
                                    font-size: 20rpx;
                                    font-family: PingFangSC, PingFangSC-Regular;
                                    font-weight: 400;
                                    color: #303030;
                                    align-items: center;
                                    margin-bottom: 15rpx;
                                    margin-right: 20rpx;

                                    image {
                                        width: 35rpx;
                                        height: 35rpx;
                                        border: 2rpx solid #303030;
                                        border-radius: 12rpx;
                                        margin-right: 5rpx;
                                    }

                                    .praise-name {}
                                }
                            }
                        }

                        .comment-list {
                            width: 100%;
                            display: flex;
                            flex-direction: row;

                            .comment-left {
                                width: 10%;

                                image {
                                    width: 40rpx;
                                    height: 40rpx;
                                    padding: 20rpx 0rpx;
                                }
                            }

                            .comment-right {
                                width: 90%;
                                display: flex;
                                flex-direction: column;
                                flex-wrap: wrap;
                                background: #f4f4f4;
                                padding: 20rpx 20rpx;

                                .comment-item {
                                    font-size: 25rpx;
                                    font-family: PingFangSC, PingFangSC-Regular;
                                    font-weight: 400;
                                    color: #303030;
                                    display: inline;
                                    margin-bottom: 10rpx;

                                    .comment-name {
                                        display: inline;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        font-family: PingFangSC, PingFangSC-Regular;
                                        font-weight: 600;
                                        color: #303030;
                                    }

                                    image {
                                        width: 35rpx;
                                        height: 35rpx;
                                        border: 2rpx solid #303030;
                                        border-radius: 12rpx;
                                        margin-right: 10rpx;
                                        margin-bottom: -10rpx;
                                    }

                                    .comment-word {
                                        display: inline;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
  